<!--商品管理-->
<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="display: flex;justify-content: space-between;margin-bottom: -10px;">
			<div>
				<p class="text">商品管理</p>
			</div>
			<el-form :inline="true">
				<el-form-item>
					<el-button type="primary" @click="cusdialog = true" icon="el-icon-search">查询</el-button>
				</el-form-item>
				<el-form-item >
					<el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus">添加商品</el-button>
				</el-form-item>
			</el-form>
		</el-col>
						
		<!--列表-->
		<el-table :data="RoomList" highlight-current-row v-loading="loading" border @selection-change="selsChange" style="width: 100%;">
			<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
			<el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
			<el-table-column prop="price" label="原价格" align="center"></el-table-column>
			<el-table-column prop="seckillPrice" label="秒杀价格"align="center"></el-table-column>
			<el-table-column prop="categoryName" label="分类" align="center"></el-table-column>
			<el-table-column prop="branch" label="积分" align="center"></el-table-column>
			<el-table-column prop="stock" label="当前库存量" width="100" align="center"></el-table-column>
			<el-table-column prop="stockTotal" label="总库存量" align="center"></el-table-column>
			<el-table-column prop="smallChart" label="缩略图" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.smallChart" alt="" style="width: 100%;">
				</template>
			</el-table-column>
			<el-table-column prop="bigChart" label="展示图" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.bigChart" alt="" style="width: 100%;">
				</template>
			</el-table-column>
			<el-table-column prop="state" align="center" label="是否上架">
				<template slot-scope="scope">
					<p v-if="scope.row.state == '0'">未上架</p>
					<p v-else-if="scope.row.state == '1'">已上架</p>
				</template>
			</el-table-column>
			<el-table-column prop="seckillStartTime" label="秒杀开始时间" width="170" align="center"></el-table-column>
			<el-table-column prop="seckillEndTime" label="秒杀结束时间" width="170" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="170" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
					<el-button v-if="scope.row.state == '0'" type="warning" size="small" @click="handleShelve(scope.$index, scope.row)" icon="el-icon-s-check">上架</el-button>
					<el-button v-if="scope.row.state == '1'" type="danger" size="small" @click="handleShelve(scope.$index, scope.row)" icon="el-icon-delete">下架</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination background layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--添加界面-->
		<el-dialog title="商品添加" :visible.sync="dialogVisible" width="55%" :before-close="handleClose" style="margin-top: -100px;">
			<el-form :model="addForm" label-width="105px" ref="addForm">
				<el-form-item label="分类" prop="categoryId">
					<el-select v-model="addForm.categoryId" placeholder="请选择分类名称">
						<el-option v-for="item in typeList" :key="item.catName" :label="item.catName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="addForm.goodsName" auto-complete="off" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="商品缩略图" ref="image" prop="smallChart">
					<el-upload
					  class="upload-demo"
					  action="/manager/common/upload/uploadFile"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :on-success="handleSuccess"
					  ref="upload1"
					  :file-list="fileList"
					  list-type="picture">
					  <el-button size="small" type="primary">选择缩略图</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，单张，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="商品展示图" ref="image" prop="bigChart">
					<el-upload
					  class="upload-demo"
					  action="/manager/common/upload/uploadFile"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :on-success="handleShow"
					  ref="upload2"
					  :file-list="fileList"
					  list-type="picture">
					  <el-button size="small" type="primary">选择展示图</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，单张，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="原价格" prop="price">
					<el-input v-model="addForm.price" auto-complete="off" placeholder="价格保留2位小数"></el-input>
				</el-form-item>
				<el-form-item label="秒杀价格" prop="seckillPrice">
					<el-input v-model="addForm.seckillPrice" auto-complete="off" placeholder="价格保留2位小数"></el-input>
				</el-form-item>
				<el-form-item label="商品积分" prop="branch">
					<el-input v-model="addForm.branch" auto-complete="off" placeholder="积分保留2位小数"></el-input>
				</el-form-item>
				<el-form-item label="秒杀开始时间" prop="seckillStartTime">
					<el-date-picker v-model="addForm.seckillStartTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始日期时间" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="秒杀结束时间" prop="seckillEndTime">
					<el-date-picker v-model="addForm.seckillEndTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束日期时间" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="当前库存量" prop="stock">
					<el-input v-model="addForm.stock" auto-complete="off" placeholder="输入当前可用库存量"></el-input>
				</el-form-item>
				<el-form-item label="总库存量" prop="stockTotal">
					<el-input v-model="addForm.stockTotal" auto-complete="off" placeholder="输入总库存量"></el-input>
				</el-form-item>
				<el-form-item label="是否上架" prop="state">
					<el-radio-group v-model="addForm.state">
						<el-radio class="radio" :label="1">上架</el-radio>
						<el-radio class="radio" :label="0">下架</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="内容详情" ref="image" prop="detailsChart">
					<el-upload
					  class="upload-demo"
					  action="/manager/common/upload/uploadFile"
					  multiple
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :on-success="handleVideoSuccess"
					  ref="upload3"
					  :file-list="fileList"
					  list-type="picture">
					  <el-button size="small" type="primary">选择商品详情图</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，单张，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary"  @click.native="addSubmit"  :loading="addLoading">确定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑页面 -->
		<el-dialog title="商品修改" :visible.sync="editFormVisible" width="55%" :before-close="handleClose" style="margin-top: -100px;">
			<el-form :model="editForm" label-width="105px" ref="editForm">
				<el-form-item label="分类" prop="categoryId">
					<el-select v-model="editForm.categoryId" placeholder="请选择分类名称">
						<el-option v-for="item in typeList" :key="item.catName" :label="item.catName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="editForm.goodsName" auto-complete="off" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="原价格" prop="price">
					<el-input v-model="editForm.price" auto-complete="off" placeholder="价格保留2位小数"></el-input>
				</el-form-item>
				<el-form-item label="秒杀价格" prop="seckillPrice">
					<el-input v-model="editForm.seckillPrice" auto-complete="off" placeholder="价格保留2位小数"></el-input>
				</el-form-item>
				<el-form-item label="商品积分" prop="branch">
					<el-input v-model="editForm.branch" auto-complete="off" placeholder="积分保留2位小数"></el-input>
				</el-form-item>
				<el-form-item label="秒杀开始时间" prop="seckillStartTime">
					<el-date-picker v-model="editForm.seckillStartTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始日期时间" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="秒杀结束时间" prop="seckillEndTime">
					<el-date-picker v-model="editForm.seckillEndTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束日期时间" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="当前库存量" prop="stock">
					<el-input v-model="editForm.stock" auto-complete="off" placeholder="输入当前可用库存量"></el-input>
				</el-form-item>
				<el-form-item label="总库存量" prop="stockTotal">
					<el-input v-model="editForm.stockTotal" auto-complete="off" placeholder="输入总库存量"></el-input>
				</el-form-item>
				<el-form-item label="是否上架" prop="state">
					<el-radio-group v-model="editForm.state">
						<el-radio class="radio" :label="1">上架</el-radio>
						<el-radio class="radio" :label="0">下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editFormVisible = false">取 消</el-button>
				<el-button type="primary"  @click.native="editSubmit"  :loading="loading">确定</el-button>
			</span>
		</el-dialog>
		<!-- 自定义查询-->
		<el-dialog title="自定义查询" :visible.sync="cusdialog" width="35%" :before-close="handleClose">
			<el-form :model="cusForm" label-width="105px" ref="cusForm">
				<el-form-item label="分类ID" prop="categoryId">
					<el-input v-model="cusForm.categoryId" auto-complete="off" placeholder="请输入分类ID" style="width: 220px;"></el-input>
				</el-form-item>
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="cusForm.goodsName" auto-complete="off" placeholder="请输入商品名称" style="width: 220px;"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cusdialog = false">取 消</el-button>
				<el-button type="primary"  @click.native="cusSubmit" >查询</el-button>
			</span>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../../common/js/util'
	import wangeditor from '../../../components/addRoom.vue'
	import { 
		getGoodList, 
		editStatus,
		getGoodType,
		addGood, 
		editGoods,
		Refreshtoken
	} from '../../../api/api';

	export default {
		inject:['reload'],
		data() {
			return {
				RoomList: [],
				total: 0,
				page: 1,
				size:10,
				loading: false,
				dialogVisible: false,
				editFormVisible:false,
				fileList: [],
				scope:'',
				sels: [],//列表选中列
				listLoading: false,
				ViewVisible:false,
				RoomDetail:[],//详情
				//新增界面数据
				addForm: {
					categoryId:'',
					goodsName: '',
					state: 1,
					smallChart:'',
					bigChart:'',
					price:'',
					detailsChart:'',
					stockTotal:'',
					stock:'',
					seckillEndTime:'',
					seckillStartTime:'',
					seckillPrice:'',
					branch:'',
					detailsChart:[]
				},
				addLoading: false,
				Type0: '通用',
				Type1: '专属',
				nstate0:'禁用',
				nstate1:'正常',
				// 开始
				typeList:[],
				editForm:{
					categoryId:'',
					goodsName: '',
					state: 1,
					smallChart:'',
					bigChart:'',
					price:'',
					stockTotal:'',
					stock:'',
					seckillEndTime:'',
					seckillStartTime:'',
					seckillPrice:'',
					branch:'',
					detailsChart:[]
				},
				cusdialog:false,
				cusForm:{
					categoryId:'',
					goodsName:'',
					status:-1
				}
			}
		},
		components: {
		      wangeditor 
		    },
		mounted() {
			var Token = sessionStorage.getItem('Token');
			var timestamp = new Date().getTime();
			let para = {
				token: Token,
				curpage:1,
				pagesize:10,
				timestamp: timestamp
			};
			this.loading = true;
			getGoodList(para).then((res) => {
				var res = res.data;
				if (res.code != 0) {
					this.$message({
						message: res.message,
						type: 'error'
					});
				} else {
					this.total = res.data.total;
					this.RoomList = res.data.list;
					this.loading = false;
				}
			});
			
			this.queryInfo();
			this.timer = setInterval(() => {
			   setTimeout(this.queryInfo, 0)
			}, 600000)
			
			// 获取商品分类
			getGoodType(para).then((res) => {
				var res = res.data;
				if (res.code != 0) {
					this.$message({
						message: res.message,
						type: 'error'
					});
				} else {
					this.typeList = res.data;
					this.loading = false;
				}
			});
		},
		methods: {
			// 设置定时器
			queryInfo() {
				var Token = sessionStorage.getItem('Token');
				var timestamp = new Date().getTime();
				let para = {token: Token,timestamp: timestamp};
				Refreshtoken(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.loading = false;
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//性别显示转换
			formatSex: function (row, column) {
				return row.contentType == 1 ? '专属' : row.contentType == 0 ? '通用' : '未知';
			},
			handleSizeChange(val) {
				this.size = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},
			//显示新增界面
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleRemove(file, fileList) {
			    console.log(file, fileList);
			},
			handlePreview(file) {
			 console.log(file);
			},
			// 缩略图
			handleSuccess(res,file) {
			 this.imgUrl = file.response.data[0].url
			},
			// 展示图
			handleShow(res,file){
			 this.Show = file.response.data[0].url
			},
			// 详情图
			handleVideoSuccess(res,file) {
			    this.addForm.detailsChart.push(file.response.data[0].url)
			},
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认添加商品吗？', '提示', {}).then(() => {
							this.addLoading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp = new Date().getTime();
							var imgUrl = this.imgUrl;//缩略图
							var ShowImg = this.Show;//展示图
							var arr = this.addForm.detailsChart;
							var data = arr.join(',');//详情图
							let para = {
								token: Token,
								timestamp: timestamp,
								categoryId: this.addForm.categoryId,
								goodsName: this.addForm.goodsName,
								state: this.addForm.state,
								smallChart: imgUrl,
								price: this.addForm.price,
								stockTotal: this.addForm.stockTotal,
								stock: this.addForm.stock,
								seckillEndTime: this.addForm.seckillEndTime,
								seckillStartTime: this.addForm.seckillStartTime,
								seckillPrice: this.addForm.seckillPrice,
								bigChart:ShowImg,
								detailsChart:data,
								branch:this.addForm.branch
							};
							addGood(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '添加商品成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.$refs.upload1.clearFiles();
								this.$refs.upload2.clearFiles();
								this.$refs.upload3.clearFiles();
								this.dialogVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			//上/下架
			handleShelve(index, row) {
				if (row.state == '0') {
					this.$confirm('确认上架商品吗？', '提示', {}).then(() => {
						var state = 1;
						var id = row.id;
						this.shelve(id,state)
					});
				} else if(row.state == '1'){
					this.$confirm('确认下架商品吗？', '提示', {}).then(() => {
						var state = 0;
						var id = row.id;
						this.shelve(id,state)
					});
				}
			},
			shelve(id,state){
				var Token = sessionStorage.getItem('Token');
				var timestamp = new Date().getTime();
				var para = {token: Token,id:id,state:state,timestamp: timestamp};
				this.loading = true;
				editStatus(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.loading = false;
						this.getList();
					}
				});
			},
			// 修改商品内容
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			editSubmit(){
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交修改的商品内容吗？', '提示', {}).then(() => {
							this.loading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp = new Date().getTime();
							let para = {
								token: Token,
								timestamp: timestamp,
								id:this.editForm.id,
								categoryId: this.editForm.categoryId,
								goodsName: this.editForm.goodsName,
								state: this.editForm.state,
								price: this.editForm.price,
								stockTotal: this.editForm.stockTotal,
								stock: this.editForm.stock,
								seckillEndTime: this.editForm.seckillEndTime,
								seckillStartTime: this.editForm.seckillStartTime,
								seckillPrice: this.editForm.seckillPrice,
								branch:this.editForm.branch
							};
							editGoods(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '修改商品成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			// 自定义查询
			cusSubmit(){
				this.$confirm('确认查询商品吗？', '提示', {}).then(() => {
					this.loading = true;
					var Token = sessionStorage.getItem('Token');
					var timestamp = new Date().getTime();
					if (this.cusForm.goodsName != '') {
						var para = { token: Token, curpage:this.page, pagesize:this.size, timestamp: timestamp,goodsName:this.cusForm.goodsName};
					}else if(this.cusForm.categoryId != ''){
						var para = { token: Token, curpage:this.page, pagesize:this.size, timestamp: timestamp,categoryId:this.cusForm.categoryId};
					}
					getGoodList(para).then((res) => {
						this.addLoading = false;
						var res = res.data;
						if (res.code != 0) {
							this.$message({
								message: res.message,
								type: 'error'
							});
						} else {
							this.total = res.data.total;
							this.RoomList = res.data.list;
							this.loading = false;
							this.cusdialog = false;
						}
					});
				});
			},
			getList:function(){
				var Token = sessionStorage.getItem('Token');
				var timestamp = new Date().getTime();
				let para = {
					token: Token,
					curpage:this.page,
					pagesize:this.size,
					timestamp: timestamp
				};
				this.loading = true;
				getGoodList(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.total = res.data.total;
						this.RoomList = res.data.list;
						this.loading = false;
					}
				});
			}
		},
		beforeDestroy() {
		  clearInterval(this.timer);        
		  this.timer = null;
		}
	}

</script>

<style scoped>
.text{
	font-family: "arial, helvetica, sans-serif";
	font-size: 16px;
	color: #333;
	margin-top: 8px;
	margin-left: 10px;
	font-weight: 600;
}
</style>